<template>
  <div class="app">
    <div class="top">
      <div class="wen">
        <b @click="fub()">职业百科{{ obj.age }}</b>

        <b>{{ text }}</b>
      </div>
      <van-search
        @click="bake()"
        v-model="value"
        shape="round"
        background=" #daf1f000"
        placeholder="请输入搜索关键词"
      />
    </div>
    <nav>
      <div class="tu_biao">
        <div class="tu_wen">
          <router-link to="/zhiye">
            <span class="iconfont icon-baike">
              <b>职业百科</b>
            </span></router-link
          >
          <router-link to="/heihua">
            <span class="iconfont icon-cidianku"
              ><b>黑话词典</b>
            </span></router-link
          >
          <router-link to="/zhiyety">
            <span class="iconfont icon-tijianbaogao"><b>职业体检</b> </span>
          </router-link>
          <router-link to="/weishi">
            <span class="iconfont icon-fengxiang-xian"><b>行业风向</b> </span>
          </router-link>
          <span class="iconfont icon-shuben-book3"><b>职业百科</b> </span>
          <router-link to="/tujian">
            <span class="iconfont icon-baike"><b>职业图鉴</b> </span>
          </router-link>

          <span class="iconfont icon-ziyuanldpi"><b>职业对比</b> </span>
        </div>
      </div>
    </nav>
    <main>
      <div>
        <div class="toux" v-for="(v, i) in this.$store.state.qiqi.arr" :key="i">
          <img :src="v.img" alt="" />
          <span>{{ v.name }}</span>
          <div class="zhiw">{{ v.job }}</div>
          <div class="neirong">
            <div class="jiedu">
              神解读
              <i @click="fun(v)">{{ v.jiedu }}</i>
              <div class="xinshi">
                <b class="wen1">{{ v.xinshi }}</b>
                <b class="wen2">{{ v.neirong | wen2 }}</b>
              </div>
            </div>
          </div>
          <div id="zan">
            <b class="iconfont icon-dianzan"
              >{{ v.zan }}&emsp;
              <b class="iconfont icon-xiaoxi1">评论</b>
            </b>
            <b class="iconfont icon-bixin">Get</b>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import qiqimix from "@/mixins/qiqi.js";
export default {
  //mixins局部混入
  mixins: [qiqimix],
  data() {
    return {
      value: "",
      obj: {
        name: "大赞",
      },
    };
  },
  //局部过滤
  filters: {
    wen2(val) {
      if (val.length > 45) {
        return val.substr(0, 45) + "...全文";
      } else {
        return val;
      }
    },
  },
  mounted() {
    this.$store.dispatch("QI_WEN");
  },
  methods: {
    bake() {
      this.$router.push("/sousuo");
    },
    fun(v) {
      this.$router.push({
        name: "pinlun",
        params: { pinlun: v },
      });
    },
    // $set
    fub() {
      this.$set(this.obj, "age", "请点击下方搜索");
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 0.99rem;
  background: linear-gradient(#64bfba, #daf1f0);
  position: relative;
  .wen {
    position: absolute;
    top: -0.63rem;
    left: 0.26rem;
    height: 0rem;
    b:nth-child(1) {
      font-size: 0.32rem;
      color: white;
      margin-right: 0.1rem;
      font-weight: 700;
    }

    b:nth-child(2) {
      font-size: 0.14rem;
      color: white;
    }
  }

  .van-search {
    position: absolute;
    bottom: 0.05rem;
    left: 0.1rem;
    width: 3.5rem;
    i {
      color: #64bfba;
    }
  }
}
nav {
  height: 0.86rem;
  flex: 1;
  border-bottom: 0.06rem solid #f7f7f7;
  .tu_biao {
    .tu_wen {
      display: flex;
      overflow: auto;
      flex-wrap: nowrap;
      span {
        display: flex;
        flex-direction: column;
        text-align: center;
        flex-shrink: 0;
        font-size: 0.28rem;
        margin-top: 0.27rem;
        margin-right: 0.2rem;
        padding-left: 0.1rem;
        color: #64bfba;

        b {
          font-size: 0.12rem;
          color: black;
          width: 0.49rem;
        }
      }
    }
  }
}
main {
  div {
    .toux {
      margin-top: -0.31rem;
      margin-left: 0.2rem;
      img {
        border-radius: 50%;
        width: 0.3rem;
        height: 0.3rem;
        margin-right: 0.05rem;
      }
      span {
        font-size: 0.14rem;
        position: relative;
        top: -0.17rem;
        font-weight: 700;
      }
      .zhiw {
        font-size: 0.12rem;
        color: #9b9b9b;
        margin-top: -0.37rem;
        margin-left: 0.33rem;
      }
    }
    .neirong {
      margin-top: 0.16rem;
      .jiedu {
        font-size: 0.12rem;
        color: #5fb2b0;
        i {
          font-size: 0.16rem;
          color: black;
        }
      }
      .xinshi {
        width: 3.45rem;
        height: 0.64rem;
        margin: 0.15rem auto;
        background-color: #f5fbfa;
        text-align: center;
        .wen1 {
          color: black;
          font-size: 0.18rem;
          margin-left: 0.1rem;
          padding-right: 0.15rem;
          line-height: 44px;
        }
        .wen2 {
          color: black;
        }
      }
    }
    #zan {
      display: flex;
      font-size: 0.12rem;
      justify-content: space-between;
      padding-right: 0.1rem;
      .icon-bixin {
        border: 0.01rem solid #5fb2b0;
        width: 0.45rem;
        color: #5fb2b0;
        text-align: center;
      }
    }
  }
}
</style>
